<template>
  <div style="height: 100%;background-color: #01001C;">
    <div class="conten">
      <el-row>
        <el-col :span="24"><img class="video" src="../../assets/imgs/video.png"><p style="color:#FFFFFF;font-size:5px;float: left;margin: 13px 43px;">视频输入</p><p v-if="isShow1" style="color: rgb(179, 41, 41);font-size: 12px;right: 36px;margin: 13px 0;position: absolute;">警告：存在像头不在线</p></el-col>
        <div style="height: 1px;margin-top: 30px;width: 90%;background-image: linear-gradient(90deg, #1D3CA0, #020B1F);" />
      </el-row>
      <el-row v-if="cameraList.length>0">
        <div v-for="(item,index) in cameraList" :key="index+'video'" :class="[item.state ? 'camera':'camera2']">
          <p style="margin: 10px 13px;"> {{ item.name }} </p>
          <p v-if="item.state" style="color:#18E115;margin-left: 13px;">在线</p>
          <p v-if="!item.state" style="color:#B32929;margin-left: 13px;">离线</p>
        </div>
      </el-row>
      <el-row v-if="cameraList.length===0">
        <p style="color: #999999;text-align: center;font-size: 12px;margin-top: 16%;">暂无数据</p>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAllTribunalCameraStates } from '@/api/tribunalCamera'
export default {
  name: '',
  props: {
    tribunal: {
      type: Number, // 类型
      default: () => {
      } // 默认值
    }
  },
  data() {
    return {
      week: null,
      isShow1: false,
      times: null,
      times2: null,
      cameraList: [],
      TribunalOptions: [],
      courtCode: null,
      tribunalCode: this.tribunal,
      camera: {
        tribunalCode: this.tribunal
      }
    }
  },
  watch: {
    tribunal(newvalue) {
      this.camera.tribunalCode = newvalue
      if (this.camera.tribunalCode != null) {
        this.getAllTribunalCameraStates()
      }
    }
  },
  created() {
  },
  methods: {
    getAllTribunalCameraStates() {
      getAllTribunalCameraStates(this.camera).then(response => {
        this.cameraList = response.data
        const isShown = this.cameraList.some(obj => obj.state === false)
        this.isShow1 = isShown
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    .conten{
      width: 100%;
      height: 100%;
      box-shadow: 0px 0px 30px #2243B2 inset
    }
    .video{
      width: 16px;
      height: 16px;
      position: absolute;
      margin: 10px 20px;
    }
    .camera {
      width: 130px;
      height: 64px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      margin-top: 5px;
      margin-left: 15px;
      border-radius: 5px;
      background-image: linear-gradient(to top,#01001C,#1D399B);
    }
    .camera2 {
      width: 130px;
      height: 64px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      margin-top: 5px;
      margin-left: 15px;
      border-radius: 5px;
      background-image: linear-gradient(to top,#FFBEBE,#FD2A2A);
    }
</style>
